<template>
  <div class="card mb-4">
    <div class="card-header pb-0">
      <h6>全部订单</h6>
      <vsud-button color="dark" variant="gradient" @click="addVisible = true">
        <i class="fas fa-plus me-2"></i>
        新建订单
      </vsud-button>
    </div>
    <div class="card-body px-0 pt-0 pb-2">
      <div class="table-responsive p-0">
        <table class="table align-items-center mb-0">
          <thead>
            <tr>
              <th
                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
              >
                产品名称及编号
              </th>
              <th
                class="text-center text-secondary text-xxs font-weight-bolder opacity-7"
              >
                产品类型
              </th>
              <th
                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
              >
                数量
              </th>
              <th
                class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
              >
                截止时间
              </th>
              
              <th class="text-center text-xxs font-weight-bolder opacity-7">
                操作
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in form" :key="index">
              <td>
                <div class="d-flex px-2 py-1">
                  <div class="d-flex flex-column justify-content-center">
                    <el-badge value='已发布' class="item" v-if="item.isOpen">
                      <h6 class="mb-0 text-sm">{{ item.name }}</h6></el-badge
                    >
                    <h6 class="mb-0 text-sm" v-else>{{ item.name }}</h6>
                    <p class="text-xs text-secondary mb-0">
                      编号： {{ item.number }}
                    </p>
                  </div>
                </div>
              </td>
              <td class="align-middle text-center text-sm">
                {{ item.type }}
              </td>
              <td class="align-middle text-center text-sm">
                {{ item.size }}
              </td>
              <td class="align-middle text-center">
                <span class="text-secondary text-xs font-weight-bold">{{
                  item.time
                }}</span>
              </td>
              
              <td
                class="align-middle text-center"
                style="justify-content: center"
              >
                <a
                  class="btn btn-link text-danger text-gradient px-3 mb-0"
                  @click="set(item.number, 'delete')"
                >
                  <i class="far fa-trash-alt me-2" aria-hidden="true"></i>删除
                </a>
                <a
                  class="btn btn-link text-dark px-3 mb-0"
                  @click="set(item.number, 'edit')"
                >
                  <i
                    class="fas fa-pencil-alt text-dark me-2"
                    aria-hidden="true"
                  ></i
                  >编辑
                </a>
                <a
                  class="btn btn-link text-dark px-3 mb-0 align-items-center"
                  v-if="!item.isOpen"
                  @click="item.isOpen = !item.isOpen"
                >
                  <el-icon style="font-size:15px;vertical-align:middle"><CirclePlusFilled /></el-icon>
                 发布订单
                  
                </a>
                <a
                  class="btn btn-link text-dark px-3 mb-0 align-items-center"
                  v-if="item.isOpen"
                  @click="item.isOpen = !item.isOpen"
                >
                  <el-icon style="font-size:15px vertical-align:middle"><CloseBold /></el-icon>
                  取消发布
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <el-pagination layout="prev, pager, next" :total="50" />
    </div>
  </div>
  <!-- 编辑弹窗 -->
  <el-dialog v-model="editVisible" title="编辑订单信息" width="40%">
    <el-form :model="selectEquip">
      <el-form-item label="产品编号" :label-width="formLabelWidth">
        <el-input v-model="selectEquip.number" disabled></el-input>
      </el-form-item>
      <el-form-item label="产品名称" :label-width="formLabelWidth">
        <el-input v-model="selectEquip.name"></el-input>
      </el-form-item>
      <el-form-item label="产品类别" :label-width="formLabelWidth">
        <el-select v-model="selectEquip.type">
          <el-option
            v-for="item in types"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量" :label-width="formLabelWidth">
        <el-input v-model="selectEquip.size" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="截止时间" :label-width="formLabelWidth">
        <el-input v-model="selectEquip.time" autocomplete="off"></el-input>
      </el-form-item>
      
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="edit(selectEquip.number)"
          >确定</el-button
        >
        <el-button @click="editVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 新增弹窗 -->
  <el-dialog v-model="addVisible" title="新建订单信息" width="40%">
    <el-form :model="newEquip">
      <el-form-item label="产品编号" :label-width="formLabelWidth">
        <el-input v-model="newEquip.number" disabled>#fw3253t563</el-input>
      </el-form-item>
      <el-form-item label="产品名称" :label-width="formLabelWidth">
        <el-input v-model="newEquip.name"></el-input>
      </el-form-item>
      <el-form-item label="产品类型" :label-width="formLabelWidth">
        <el-input v-model="newEquip.type"></el-input>
      </el-form-item>
      <el-form-item label="数量" :label-width="formLabelWidth">
        <el-input v-model="newEquip.size" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="截止时间" :label-width="formLabelWidth">
        <el-input v-model="newEquip.time"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="add()">确定</el-button>
        <el-button @click="addVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 删除弹窗 -->
  <el-dialog v-model="deleteVisible" title="警告" width="30%">
    <span>确认删除{{ editingNum }}号订单？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="remove(editingNum)">确定</el-button>
        <el-button @click="deleteVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import VsudButton from "@/components/VsudButton.vue";
import img1 from "@/assets/img/team-2.jpg";
import img2 from "@/assets/img/team-3.jpg";
import img3 from "@/assets/img/team-4.jpg";
import img4 from "@/assets/img/team-3.jpg";
import img5 from "@/assets/img/team-2.jpg";
import img6 from "@/assets/img/team-4.jpg";
import { reactive } from "vue-demi";
import { CirclePlusFilled,CloseBold } from "@element-plus/icons";

export default {
  name: "authors-table",
  props: {
    types: [],
  },
  data() {
    return {
      formLabelWidth: "120px",
      editingNum: "",
      selectEquip: reactive({
        name: "",
        number: "",
        size: "",
        type: "",
        time: "",
      }),
      newEquip: reactive({
        name: "",
        number: "#EF5735823",
        size: "",
        type: "",
        time: "",
      }),
      editVisible: false,
      addVisible: false,
      deleteVisible: false,
      img1,
      img2,
      img3,
      img4,
      img5,
      img6,
      form: [
        {
          name: "蛋挞",
          number: "028282",
          type: "食品",
          size: 1500,
          time: "2022.07.02",
          isOpen: false,
        },
        {
          name: "护发素",
          number: "12387182",
          size: 200,
          time: "2022.07.06",
          type: "洗护用品",
          isOpen: true,
        },
        {
          name: "联想小新Air16",
          number: "78312389",
          size: 1000,
          type: "电子产品",
          time: "2023.09.02",
          isOpen: true,
        },
        {
          name: "毛巾",
          number: "31324423",
          type: "日用品",
          size: 1100,
          time: "2022.09.30",
          isOpen: false,
        },
        {
          name: "热带风味冰红茶",
          number: "24801002",
          type: "食品",
          size: 180000,
          time: "2022.12.26",
          isOpen: false,
        },
        {
          name: "橡皮",
          number: "40201341",
          type: "学习用品",
          size: 900,
          time: "2022.11.01",
          isOpen: true,
        },
        {
          name: "999感冒灵",
          number: "890108",
          type: "药品",
          size: 19090,
          time: "2023.01.01",
          isOpen: true,
        },
        {
          name: "金铲铲之战小小英雄套装",
          number: "12489214",
          type: "电子游戏",
          size: 200,
          time: "2023.02.04",
          isOpen: false,
        },
      ],
    };
  },
  components: {
    VsudButton,
    CirclePlusFilled,
    CloseBold
  },
  watch: {
    form: {
      handler(val) {
        console.log(val);
      },
      deep: true,
    },
    selectEquip: {
      handler(val) {
        console.log(val);
      },
      deep: true,
    },
  },
  methods: {
    set(number, operation) {
      this.editingNum = number;
      if (operation === "edit") {
        let selection = this.form.find((item) => item.number === number);
        Object.assign(this.selectEquip, selection || {});
        this.editVisible = true;
      } else {
        this.deleteVisible = true;
      }
    },
    remove(number) {
      console.log(number);
      this.form = this.form.filter((item) => item.number != number);
      this.deleteVisible = false;
    },
    edit(number) {
      console.log("num", number);
      this.form.forEach((val, index) => {
        if (val.number === number) {
          this.form.splice(index, 1, this.selectEquip);
        }
      });
      this.editVisible = false;
    },
    add() {
      this.form.push(this.newEquip);
      this.addVisible = false;
    },
  },
};
</script>
